import { Meta, Status, Props, Story } from '../../../../.storybook/components';
import * as Stories from './Pagination.stories';

<Meta of={Stories} />

# Pagination

<Status variant="stable" />

Pagination provides a way for users to visualize bulks of information distributed over multiple pages, while always providing an anchor to move from where they currently are in the list.

<Story of={Stories.Base} />
<Props />

## When to use it

Use it when you have a list of more than 25 items related to the same category. This allows a better experience searching through the data for our users.

## Usage guidelines

- **Do** always place the pagination component on the bottom of the list
- **Do not** use pagination if a list is below 25 items

### Many pages

When there are more than 5 pages in total, the pagination is displayed as a dropdown.

<Story of={Stories.ManyPages} />
